<template>
  <div>
    <BaseForm ref="searchForm" type="search" :items="formItems" v-model:form="searchParams" @search="handleSearch">
      <template #suffix-button>
        <el-button type="primary" @click="handleEdit({})">
          <el-icon><Plus /></el-icon>
          添加
        </el-button>
        <el-link style="margin-left: 10px" type="primary" size="small" :underline="false" @click.prevent="handleConfig"
          >机器人自动回复群消息配置</el-link
        >
      </template>
    </BaseForm>

    <BaseTable
      ref="baseTable"
      :getTableDataFn="basicConfigService.pageListRobotResDto"
      :searchParams="searchParams"
      :serial="true"
      :select="true"
      :handleDisable="handleDisable"
    >
      <template #select>
        <el-table-column type="selection" width="55" :selectable="selectable" />
      </template>
      <el-table-column prop="managerName" label="机器人名称" width="100" />
      <el-table-column prop="wxRobotId" label="唯一标识" width="100" />
      <el-table-column prop="wxId" label="微信ID" width="100" />
      <el-table-column prop="wxGroupDtoList" label="关联微信群（请到微信群管理设置关联）" minWidth="160">
        <template #default="scope">
          <Tooltip :text="scope.row.wxGroupDtoList?.map((e) => e.wxGroupName)?.join('、')"></Tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="powerName" label="供电单位" width="100" />
      <el-table-column prop="managerDtoList" label="关联网格经理（请到微信群管理设置关联）" minWidth="180">
        <template #default="scope">
          <Tooltip :text="scope.row.managerDtoList?.map((e) => e.managerName)?.join('、')"></Tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注">
        <template #default="scope">
          <Tooltip :text="scope.row.remark"></Tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="微信好友数量">
        <template #default="scope">
          <el-link
            v-if="scope.row.relationWxUserNum"
            :underline="false"
            link
            type="primary"
            size="small"
            @click.prevent="showPersonDetail(scope.row)"
            >{{ scope.row.relationWxUserNum }}</el-link
          >
          <span v-else>{{ scope.row.relationWxUserNum }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="最后修改时间" minWidth="100">
        <template #header>
          <span>最后修改时间</span>
          <SortTable :sortTablekey="sortTablekey" @click="sortTablekey = 1" :handleSearch="handleSearch"></SortTable>
        </template>
      </el-table-column>
      <el-table-column prop="robotState" label="机器人状态" minWidth="150">
        <template #default="scope">
          <div
            :style="{
              color: scope.row.robotState == 1 ? '#70b603fe' : '#d9001bfe',
            }"
          >
            {{ getRobotState(scope.row.robotState) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="isDisable" label="启用状态" width="90">
        <template #default="scope">
          <isDisableStatus :status="scope.row.isDisable"></isDisableStatus>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="200">
        <template #default="scope">
          <el-link :underline="false" link type="primary" size="small" @click.prevent="handleOpenPrivate(scope.row)">{{
            scope.row.isOpenPrivate == 1 ? '关闭私聊' : '开启私聊'
          }}</el-link>
          <el-link
            v-if="scope.row.robotState == 1"
            :underline="false"
            link
            type="primary"
            size="small"
            @click.prevent="handleRefresh(scope.row)"
            >刷新数据</el-link
          >

          <el-link
            v-if="scope.row.robotState == 2 || scope.row.robotState == 3"
            :underline="false"
            link
            type="primary"
            size="small"
            @click.prevent="handleLogin(scope.row)"
            >机器人登录</el-link
          >
          <el-link :underline="false" link type="primary" size="small" @click.prevent="handleEdit(scope.row)"
            >编辑</el-link
          >
          <el-link
            :underline="false"
            link
            v-if="scope.row.robotState == 1"
            type="primary"
            size="small"
            @click.prevent="handleDisable(scope.row)"
            >{{ scope.row.isDisable == 1 ? '启用' : '停用' }}</el-link
          >
          <el-link :underline="false" link type="danger" size="small" @click.prevent="handleDel(scope.row)"
            >删除</el-link
          >
        </template>
      </el-table-column>
    </BaseTable>
    <EditForm
      v-if="visibleEditForm"
      v-model:dialogVisible="visibleEditForm"
      :item="item"
      :handleSearch="handleSearch"
    ></EditForm>
    <WxRobotCode
      v-if="visibleWxRobotCode"
      v-model:dialogVisible="visibleWxRobotCode"
      :item="item"
      :handleSearch="handleSearch"
    ></WxRobotCode>
    <commonConfig
      v-if="visibleCommonConfig"
      v-model:dialogVisible="visibleCommonConfig"
      :item="item"
      :handleSearch="handleSearch"
    ></commonConfig>
  </div>
</template>

<script setup lang="ts">
import WxRobotCode from '@/components/wxRobotCode.vue';
import commonConfig from './commonConfig.vue';
import EditForm from './EditForm.vue';
import openMsgBox from '@/hooks/messageBox.js';
import { basicConfigService } from '@/api/basicConfig';
import { getRobotState } from '@/hooks/getStateName';
const formItems = ref([
  {
    name: '机器人名称',
    key: 'managerName',
    type: 'input',
  },
  {
    name: '唯一标识',
    key: 'wxRobotId',
    type: 'input',
  },
  {
    name: '微信ID',
    key: 'wxId',
    type: 'input',
  },
  {
    name: '机器人状态',
    key: 'isNormal',
    type: 'select',
    options: [
      { label: '正常', value: 1 },
      { label: '异常', value: 0 },
    ],
  },
  {
    name: '状态',
    key: 'isDisable',
    type: 'select',
    options: [
      { label: '启用', value: 0 },
      { label: '停用', value: 1 },
    ],
  },

  {
    name: "供电单位",
    key: "powerId",
    clearable: true,
    type: "select-page",
    funName: "getByAreaQueryByPower",
    option: {
      name: "powerName",
      value: "powerId",
    }
  },
]);
const searchParams = ref({
  managerName: '',
  wxRobotId: '',
  wxId: '',
  isNormal: '',
  date: '',
});
const selectable = (row, index) => {
  return row.robotState == 1;
};
const baseTable = ref(null);
const sortTablekey = ref(1);
const handleSearch = (data = { sort: undefined }, e = '') => {
  if (e != 'sort') sortTablekey.value = 0;
  baseTable.value.handleSearch({
    ...searchParams.value,
    updateTimeOrder: data?.sort,
  });
};
const router = useRouter();
const showPersonDetail = (row) => {
  const query = { bizId: row.wxId, type: 1, robotName: row.managerName };

  router.push({
    path: '/basicConfig/basicInfo/weChat/groupMember',
    query: { bizId: row.wxId, type: 1, robotName: row.managerName },
  });
};
const item = ref({});
const visibleEditForm = ref(false);
const handleEdit = (row) => {
  item.value = { ...row };
  visibleEditForm.value = true;
};
const handleDel = (row) => {
  openMsgBox(
    {},
    () => {
      return basicConfigService.robotBatchDel({ data: [row.managerId] });
    },
    () => {
      handleSearch();
    },
  );
};
const visibleCommonConfig = ref(false);
const handleConfig = () => {
  visibleCommonConfig.value = true;
};
const handleDisable = (row, rows = []) => {
  let isDisable = row.isDisable || row;
  let ids = row.managerId ? [row.managerId] : rows.map((e) => e.managerId);
  openMsgBox(
    {
      tips: `是否确定${isDisable == 1 ? '启用' : '停用'}?`,
    },
    () => {
      if (isDisable == 1) {
        return basicConfigService.robotEnableBatch({
          data: ids,
        });
      } else {
        return basicConfigService.robotDisableBatch({
          data: ids,
        });
      }
    },
    () => {
      handleSearch();
    },
  );
};
const handleRefresh = (row, rows = []) => {
  let isDisable = row.isDisable || row;
  let ids = row.managerId ? [row.managerId] : rows.map((e) => e.managerId);
  openMsgBox(
    {
      tips: `是否确定要刷新?`,
    },
    () => {
      return basicConfigService.robotRefersh({
        data: row.managerId,
      });
    },
    () => {
      handleSearch();
    },
  );
};
const handleOpenPrivate = (row) => {
  openMsgBox(
    {
      tips: `是否确定要${row.isOpenPrivate == 1 ? '关闭私聊' : '开启私聊'}?`,
    },
    () => {
      return basicConfigService.robotChangePrivate({
        data: row.managerId,
      });
    },
    () => {
      handleSearch();
    },
  );
};
const visibleWxRobotCode = ref(false);
const handleLogin = (row) => {
  item.value = { ...row };
  visibleWxRobotCode.value = true;
};
</script>

<style lang="less" scoped></style>
